<template>
    <div class="box">
        <el-form-item v-for="(item, index) in condition" :key="index" :label="'条件' + pre + (index + 1)">
            <!-- <el-input size="small" v-model="item.key" autocomplete="off" placeholder="请输入关键字key"></el-input> -->
            <div class="left">
                <template v-if="item.type == 'normal'">
                    <el-select size="small" v-model="item.key" placeholder="请选择列名字段">
                        <el-option v-for="item in tableProps" :key="item.value" :label="item.label" :value="item.prop">
                        </el-option>
                    </el-select>
                    <el-select @change="(val) => { selectChange(val, index, item) }" size="small" v-model="item.con"
                        placeholder="请选择条件">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <template v-if="Array.isArray(item.val)">
                        <el-input size="small" v-model="item.val[0]" autocomplete="off" placeholder="请输入左边界值"></el-input>
                        -<el-input size="small" v-model="item.val[1]" autocomplete="off" placeholder="请输入右边界值"></el-input>
                    </template>
                    <template v-else-if="item.val != undefined">
                        <el-input size="small" v-model="item.val" autocomplete="off" placeholder="请输入关键字值"></el-input>
                    </template>
                </template>
                <template v-else-if="item.type == 'brackets' && item.children.length > 0">
                    <select-each :pre="pre + (index + 1) + '.'" :tableProps="tableProps" :condition.sync="item.children" />
                </template>
            </div>
            <div class="right">
                <template v-if="index != condition.length - 1">
                    <el-select size="small" v-model="item.linkChar" placeholder="请选择条件">
                        <el-option v-for="item in linkOpts" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <el-button v-if="condition.length > 1" type="text" class="red" icon="el-icon-remove-outline"
                    @click="deleteCondition(index)"></el-button>
                <el-button v-if="index == condition.length - 1" class="blue" @click="addCondition(item)"><i
                        class="el-icon-circle-plus-outline"></i></el-button>
                <el-button v-if="index == condition.length - 1" class="blue" @click="addCondition(item, 1)">(<i
                        class="el-icon-circle-plus-outline"></i>)</el-button>
            </div>
        </el-form-item>
    </div>
</template>

<script>
export default {
    name: 'selectEach',
    props: {
        pre: {
            type: String,
            default: () => {
                return ''
            }
        },
        condition: {
            type: Array,
            default: () => {
                return []
            }
        },
        tableProps: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            linkOpts: [{
                label: '并且',
                value: 'and'
            }, {
                label: '或者',
                value: 'or'
            },],
            options: [
                {
                    label: '等于',
                    value: 'eq'
                },
                {
                    label: '不等于',
                    value: 'ne'
                },
                {
                    label: '大于等于',
                    value: 'ge'
                },
                {
                    label: '小于等于',
                    value: 'le'
                },
                {
                    label: '大于',
                    value: 'gt'
                },
                {
                    label: '小于',
                    value: 'lt'
                },
                {
                    label: '是空',
                    value: 'isNull'
                },
                {
                    label: '不是空',
                    value: 'isNotNull'
                },
                {
                    label: '包含',
                    value: 'like'
                },
                {
                    label: '左包含',
                    value: 'likeLeft'
                },
                {
                    label: '右包含',
                    value: 'likeRight'
                },
                {
                    label: '介于',
                    value: 'between and'
                },
            ],
        }
    },
    methods: {
        //添加条件
        addCondition(item, val = 0) {
            item.linkChar = 'and'
            if (val == 1) {
                this.condition.push({
                    children: [{
                        key: '',
                        con: '',
                        val: '',
                        linkChar: '',
                        type: 'normal'//||brackets
                    }],
                    linkChar: '',
                    type: 'brackets'//||brackets
                })
                this.$emit('update:condition', this.condition)
            } else {
                this.condition.push({
                    key: '',
                    con: '',
                    val: '',
                    linkChar: '',
                    type: 'normal'//||brackets
                })
                this.$emit('update:condition', this.condition)
            }
        },
        //删除条件
        deleteCondition(index) {
            if (index == this.condition.length - 1) {
                this.condition[index - 1].linkChar = ''
                this.condition.pop()
                this.$emit('update:condition', this.condition)
                // console.log(this.condition);
            } else {
                this.condition.splice(index, 1)
                this.$emit('update:condition', this.condition)
                // console.log(this.condition);

            }
        },
        //下拉框选择改变
        selectChange(val, index, item) {//直接传入item可以直接引用。
            console.log(val, index);
            // let obj = {
            //     key: '',
            //     con: val,
            //     val: ''
            // }
            if (val == 'between and') {
                // item.val = ['', '']
                this.$set(item, 'val', ['', ''])
                this.$emit('update:condition', this.condition)
            } else if (val == 'isNull' || val == 'isNotNull') {
                delete item.val
                this.$emit('update:condition', this.condition)
            }
            else {
                // item.val = ''
                this.$set(item, 'val', '')
                this.$emit('update:condition', this.condition)
            }
        }
    }

}
</script>

<style lang="scss" scoped>
.box {
    margin-top: 10px;
}
</style>